<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper" v-if="showSearch==true">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="5" :sm="15">
            <a-form-item :label="i18n('form.keyRoute','路由唯一键')">
              <a-input :placeholder="$ti18('rxDecorator.input','请输入')" v-model="queryParam.Q_MENUKEY__S_LK"/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item :label="i18n('form.permission','权限名称')">
              <a-input :placeholder="$ti18('rxDecorator.input','请输入')"  v-model="queryParam.Q_name__S_LK"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="this.fetch">
                  {{$ti18('rxList.searchBtn','查询')}}
              </a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">
                  {{$ti18('rxList.resetBtn', '重置')}}
              </a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? $ti18("rxList.putAwayBtn","收起") : $ti18("rxList.openBtn","展开") }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button  type="primary" icon="plus" @click="$refs.modal.add()">{{$ti18('rxList.newBtn','新建')}}</a-button>

      <span style="float:right">
         <a-button type="primary" shape="circle"  icon="sync" :size="small" @click="refreshGrid"></a-button>
         <a-button type="primary" shape="circle"  icon="search" :size="small" @click="toggleSearch"></a-button>
       </span>

    </div>
    <a-table
      ref="table"
      rowKey="id"
      :pagination="pagination"
      :loading="loading"
      :columns="columns"
      :dataSource="data">

      <span slot="menuType" slot-scope="text">
        {{ text | menuTypeFilter }}
      </span>

      <span slot="visible" slot-scope="text">
        {{ text | statusFilter }}
      </span>

      <span slot="action" slot-scope="text, record">
        <a   @click="handleEdit(record)">
            {{$ti18('rxList.editBtn',"编辑")}}
        </a>
        <a-divider type="vertical" />
        <a  @click="handleAdd(record.id+'')">
            {{$ti18('rxList.add', '新增')}}
        </a>
        <a-divider type="vertical" />
        <a  @click="delById(record.id)">
            {{$ti18('rxList.delBtn','删除')}}
        </a>
      </span>
    </a-table>

    <sys-menu-edit ref="modal" @ok="handleOk" />
  </a-card>
</template>

<script>
  import { Table as T } from 'ant-design-vue'
  import SysMenuApi from '@/api/system/core/sysMenu'
  import SysMenuEdit from './SysMenuEdit.vue'


  export default {
    name: 'SysMenuList',
    components: {
      T,
      SysMenuEdit
    },
    data () {
      return {
        description: this.i18n('msa.descriptionMenu','菜单管理，只有menuKey(唯一)不为空才生效'),

        visible: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        form: null,
        // 高级搜索 展开/关闭
        advanced: false,
        //显示搜索
        showSearch: false,
        // 搜索栏目 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},

        // 表头
        columns: [
          {
            title: this.i18n('form.permission','权限名称'),
            dataIndex: 'name'
          },
          {
            title: this.i18n('form.keyRoute','路由唯一键'),
            dataIndex: 'menuKey'
          },
          {
            title: this.i18n('form.component','组件'),
            dataIndex: 'component'
          },
          {
            title: this.i18n('form.sort','排序'),
            dataIndex: 'orderNum'
          },
          {
            title: this.i18n('form.typeButton','按钮类型'),
            dataIndex: 'menuType',
            scopedSlots: { customRender: 'menuType' }
          },
          {
            title:this.i18n('form.state','状态'),
            dataIndex: 'visible',
            scopedSlots: { customRender: 'visible' }
          },
          {
            title: this.$ti18('rxList.action','操作'),
            width: '150px',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        data: [],
        pagination: false,
        loading: false,
      }
    },
    filters: {
      statusFilter (status) {
        const statusMap = {
          '1': i18n('map.hide','隐藏'),
          '0': i18n('map.display','显示')
        }
        return statusMap[status]
      },
      menuTypeFilter (type) {
        const menuMap = {
          'M': $comi18('business.folder','目录'),
          'F': $comi18('business.button','按钮'),
          'C': $comi18('business.menu','菜单')
        }
        return menuMap[type]
      }
    },
    created () {
      this.fetch()
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"sysMenu",key);
        },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      //新增
      handleAdd (parentId) {
        this.$refs.modal.add(parentId)
      },
      //编辑
      handleEdit (record) {
        this.$refs.modal.edit(record)
      },
      handleOk () {
        // this.$refs.table.refresh()
        this.fetch()
        console.log('handleSaveOk')
      },
      resetSearch () {
        this.queryParam = {}
      },
      toggleSearch () {
        this.showSearch=!this.showSearch
      },
      refreshGrid () {
        this.fetch()
      },
      delById (ids) {
        SysMenuApi.delSysMenu({ ids: ids.join(',') }).then(res => {
          if (res.success && res.code === 0) {
            this.$message.success(this.$ti18('rxMsa.deleteSuccess','删除成功'))
            this.handleOk()
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      fetch () {
        this.loading = true
        SysMenuApi.getSysMenuList(Object.assign(this.queryParam)).then(res => {
          this.data = Util.treeData(res.data, 'id')
          this.loading = false
        })
      }
    },
    watch: {

    }
  }
</script>
